<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>测试</title>
</head>
<style type="text/css">
    #parent {
        border: 1px #EEE solid;
        width: 500px;
        height: 30px;
        margin: 0 auto;
    }

    #child {
        width: 0%;
        height: 30px;
        background-color: lime;
    }

    p {
        text-align: center;
        color: fuchsia;
    }

    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>
<body>
<form id="form" action="/upload" method="POST" enctype="multipart/form-data" onsubmit="return upload();">
    <input type="file" name="file" class="file"/>
    <br/>
    <input type="submit" value="提交"/>
    <p id="info"></p>
    <div id="parent">
        <div id="child"></div>
    </div>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
    function upload() {
        $("#form").ajaxSubmit(function (message) {

        });
        // 100ms 打印一次当前的上传进度
        var update = setInterval(function () {
            var flag = false;
            $.ajax({
                type: "get",
                dataType: 'json',
                url: "/uploadStatus",
                success: function (result) {
                    $("#info").text("正在上传：" + result + "%");
                    $("#child").width(result + "%");
                    if (result == 100) {
                        //清除定时器，停止更新
                        flag = true;
                        if (flag) {
                            clearInterval(update);
                            console.log("恭喜，更新成功！");
                            $("#info").text("上传成功：" + result + "%");
                        }
                    }
                    console.log(result);
                }
            });
        }, 100);
        return false;
    }
</script>
</html>